<template>
  <div class="page">
    <div class="filter-box row-space-between">
      <Subsection :list="tabs.list" :current="0"></Subsection>
      <div class="search-box all-center">
        <van-field v-model="tabs.searchText" class="search-input" placeholder="搜索游戏" />
        <van-icon name="search" size="20px" color="var(--u-default-text-color)" @click="search" />
      </div>
    </div>

    <van-list
      v-model:loading="listView.loading"
      :finished="listView.finished"
      finished-text="没有更多了"
      @load="getGameList"
    >
      <van-cell>
        <van-grid :border="false" :column-num="3" class="imgs-box">
          <van-grid-item v-for="item in currentData.list" :key="item.id" @click="toGameDetail(item)">
            <van-image class="img-bg" :src="item.image" fit="cover"></van-image>
          </van-grid-item>
        </van-grid>
      </van-cell>
    </van-list>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import gameApi from '@/api/game'
import type { GameItemModel } from '@/types/game.types.ts'
import { ELECTRON_GAME_TYPE, GAME_TYPE } from '@/types/game.types.ts'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()

interface GameItemUIModel {
  key: ELECTRON_GAME_TYPE // 游戏key，因为目前只有两个，后端说暂时写死
  name: string // 游戏名称
  list: GameItemModel[] // 游戏数据
  page: number // 当前加载页数
  limit: number // 每页限制条数
  totalCount: number // 后端数据总数
}

interface TabDataUIModel {
  list: Array<GameItemUIModel>
  searchText: string // 搜索文本
  active: number // 当前分类
}

interface ListViewModel {
  loading: boolean
  finished: boolean
  refreshing: boolean
}

const listView = reactive<ListViewModel>({
  loading: false,
  finished: false,
  refreshing: false,
})

const tabs = reactive<TabDataUIModel>({
  active: 0,
  searchText: '',
  list: [
    {
      name: 'PG SOFT',
      key: ELECTRON_GAME_TYPE.PG,
      list: [],
      page: 0,
      limit: 25,
      totalCount: 0,
    },

    // {
    //   name: '759Gaming',
    //   key: ELECTRON_GAME_TYPE.BoleBit,
    //   list: [],
    //   page: 1,
    //   limit: 25,
    //   totalCount: 0,
    // },
  ],
})
const currentData = tabs.list[tabs.active]
const getGameList = async () => {
  currentData.page++
  const query = {
    page: currentData.page,
    limit: currentData.limit,
    is_mobile: 1,
    is_hot: 0,
    name: tabs.searchText,
    game_company_code: currentData.key,
  }
  const res = await gameApi.getGameList(query)
  if (currentData.list.length > 0) {
    currentData.list = [...currentData.list, ...res.data.list]
  } else {
    currentData.list = res.data.list
    currentData.totalCount = res.data.totalCount
  }
  listView.finished = currentData.list.length >= currentData.totalCount
  listView.loading = false
}

const search = async () => {
  currentData.page = 1
  const query = {
    page: currentData.page,
    limit: currentData.limit,
    is_mobile: 1,
    is_hot: 0,
    name: tabs.searchText,
    game_company_code: currentData.key,
  }
  const res = await gameApi.getGameList(query)
  currentData.list = res.data.list
  currentData.totalCount = res.data.totalCount
  listView.finished = currentData.list.length >= currentData.totalCount
  listView.loading = false
}

const toGameDetail = (item: GameItemModel) => {
  gameStore.toPlay({ id: item.id, type: GAME_TYPE.electro })
}
</script>

<style scoped lang="scss">
.page {
  position: relative;
  margin-top: var(--u-large-vertical-spacing);

  .filter-box {
    position: relative;
    height: 82px;
    box-sizing: border-box;

    .search-box {
      position: relative;
      box-sizing: border-box;
      width: 260px;
      height: 100%;
      border-radius: 50px;
      overflow: hidden;
      background: var(--u-weak-gray-background-color);
      padding: 23px 32px;

      .search-input {
        box-sizing: border-box;
        width: 154px;
        color: var(--u-default-text-color);
        font-family: 'PingFang SC';
        font-size: var(--u-default-text-size);
        font-weight: 400;
        background: transparent;
        padding: 0 !important;
      }
    }
  }

  .imgs-box {
    :deep(.van-grid-item__content) {
      padding: 0;
    }
    .img-bg {
      box-sizing: border-box;
      overflow: hidden;
      width: 210px;
      height: 208px;
      margin: 10px 0;
      border-radius: var(--u-default-rounded);
    }
  }

  .van-cell {
    padding: 0;
    margin: 32px 0;
  }
}
</style>
